<?php
	
	function reptrak_left_menu($opcion)
	{
		$activa["pulse"] = ($opcion == 0) ? " class=\"active\">Reptrak Pulse ": "><a href=\"reptrak.php?vista=pulse\">Reptrak Pulse</a>";
		$activa["index"] = ($opcion == 1) ? " class=\"active\">Reptrak Index ": "><a href=\"reptrak.php?vista=index\">Reptrak Index</a>";
		$activa["drivers"] = ($opcion == 2) ? " class=\"active\">Reptrak Drivers ": "><a href=\"reptrak.php?vista=drivers\">Reptrak Drivers</a>";
		
		echo "<div class=\"content row\">
			<div class=\"left-side span2\">
			  <div class=\"left-menu\">
				<ul class=\"list-menu\">
				
				  <li class=\"navbar-background\"><a href='reptrak.php'>Reptrak</a><hr/>
				  <ul class=\"sublist-menu\">
					<li" . $activa["pulse"] . "</li>
					<li" . $activa["index"] . "</li>
					<li" . $activa["drivers"] . "</li>
                  </ul>
				  </li>
				  <li class=\"navbar-background\"> <a href='visual_chart.php'>Visual Chart</a></li>
				  <li class=\"navbar-background\"><a href='inicial_reputacion.html'>Reputación</a></li>
				  <li class=\"navbar-background\"><a href='informe_negocio.php'>Informes impactos</a></li>
				  <li class=\"navbar-background\"><a href='simulacion.php'>Simulación </a></li>
				  <li class=\"navbar-background\"><a href='prediccion.php'>Predicción </a></li>
				  <li class=\"navbar-background\"><a href='sad.php'>SAD </a></li>
				</ul>
			  </div>
			  <div class=\"company\">
				© Universidad de Málaga y Corporate Excellence
			  </div>
			</div>";
	}
	
	function vista_pulse()
	{
		global $conexion;
		$single_status_menu["sectorial"] = true;
		$single_status_menu["termino"] = true;
		$single_status_menu["fecha_desde"] = true;
		$single_status_menu["fecha_hasta"] = true;
		$single_status_menu["ecuaciones"] = false;
		top_menu_reptrak(true, $single_status_menu, 0,false);
		reptrak_left_menu(0);
		
		/* Recogemos los datos de la entrada de la tabla deseada. Los atributos que introduzca el usuario los recogerá automáticamente la función realizar consulta */
		$tabla = "REPTRAK";
		//$row = realizar_consulta($tabla);
		
		echo "<div class=\"right-side span13\">
          <div class=\"inner-content\">
            <div class=\"row-fluid\">
				<script src=\"js/flotr2/flotr2.min.js\"></script><div id=\"graficas\" class=\"span11\" style=\"min-height: 220px\">";	

		
		$elementos = 4;
		$periodos = 12;
		
		for($i = 0; $i<$elementos; $i++)
		{
			for($j = 0; $j<$periodos; $j++)
			{
				$datos[$i][$j] = (40 - $i+rand(0, 50));
			}
		}
		$titulo = "Volumen información";
		$contenedor = "reptrak_volumen_barras";
		
		/*
			$offset -> Distancia entre barras. Viene a ser 1 / (número de elementos)
			$tamaño_barras -> Tamaño de las barras. Viene a ser el mismo que el offset. Saldrán todas las barras juntas, por lo que haremos que el offset ser ligeramente
								inferior al offset real y ligeramente superior al tamaño de barras
		*/
		$offset = 1 / ($elementos+1);
		$tamano_barras = 1 / ($elementos+2);

		echo "<div id = \"" . $contenedor . "\" style=\"float: left;min-height:200px; min-width: 400px;\">";
		grafica_barras_basica_vertical($contenedor, $titulo,$datos,$tamano_barras, $offset);
		echo "</div>";
		
		$datos = array();
		for($j = 0; $j<=8; $j++)
		{
			$datos[0][$j] = (40 - $i+rand(0, 20));
		}
		for($j = 0; $j<=8; $j++)
		{
			$datos[1][$j] = (50*pow(rand(10,12)/10,$j));
		}
		for($j = 0; $j<=8; $j++)
		{
			$datos[2][$j] = (40-sin(rand(1,5)*$j)+3*cos(rand(1,5)*$j));
		}
		for($j = 0; $j<=8; $j++)
		{
			$datos[3][$j] = ($datos[1][$j] * (1/$datos[2][$j])+rand(1,5)*pow($j,1.1));
		}
		
		$titulo = "Reptrak-Pulse";
		$contenedor = "reptrak_pulse_lineal";
		echo "<div id = \"" . $contenedor . "\" style=\"float: left;min-height:200px; min-width: 500px;\">";
		$nombre_funciones = array("Estima", "Admiración", "Confianza", "Impresión");
		grafica_lineal_zoom($contenedor, $titulo, $datos, $nombre_funciones);
		echo "</div></div>";
		
		
		
		
		//tabla 1
		$titulo = "Atributos Pulse";
		$estilo_tabla = "table table-bordered table-striped table-hover table-large alignrigth";
		$vacios = 0;
		$categorias = array("Estima", "Admiración", "Confianza", "Impresión");

		$ecuaciones = rand(100,1000);
		for($i=1; $i<=$ecuaciones; $i++)
		{
			$atributos["Ecuación" . str_pad($i, 4, "0", STR_PAD_LEFT)] = array("Estima"=>rand(0,100)/10,"Admiración"=>rand(0,100)/10,"Confianza"=>rand(0,100)/10,"Impresión"=>rand(0,100)/10);
		}

		

		tabla_simple($titulo,$categorias,$atributos,$vacios, $estilo_tabla, true);

		//Tabla 2
		$titulo = "Pulse";
		$estilo_tabla = "table table-bordered table-striped table-hover table-medium alignrigth";
		$categorias = array("RC");
		$atributos = array();
		for($i=1; $i<=$ecuaciones; $i++)
		{
			$atributos["Ecuación". str_pad($i, 4, "0", STR_PAD_LEFT)] = array("RC" => rand(100,300)/20);
		}

		
		
		tabla_simple($titulo,$categorias,$atributos,$vacios, $estilo_tabla, true);

		
		

			echo "</div>
			  </div>
			</div>
		</div> <!-- /container -->";
	
	}

	function vista_index()
	{
		global $conexion;
		$single_status_menu["sectorial"] = true;
		$single_status_menu["termino"] = true;
		$single_status_menu["fecha_desde"] = true;
		$single_status_menu["fecha_hasta"] = true;
		$single_status_menu["ecuaciones"] = true;
		
		top_menu_reptrak(true, $single_status_menu, 1,true);
		reptrak_left_menu(1);
		
		/* Recogemos los datos de la entrada de la tabla deseada. Los atributos que introduzca el usuario los recogerá automáticamente la función realizar consulta */
		$tabla = "REPTRAK";
		//$row = realizar_consulta($tabla);
		
		echo "<div class=\"right-side span13\">
          <div class=\"inner-content\">
            <div class=\"row-fluid\">";
		
		//tabla 1
		$titulo = "Reptrak Index";
		$clasificaciones = array("D1: Oferta","D2: Innovación","D3: Trabajo","D4: Gobierno","D5: Ciudadanía","D6: Liderazgo","D7: Finanzas");
		$categorias = array("Valor");
		$atributos = array();
		$atributos["D1: Oferta"] = array(
			"Calidad de productos y servicios"			=>array("Valor"=>rand(0,1000)/100),
			"Relación calidad precio"					=>array("Valor"=>rand(0,1000)/100),
			"Responde de sus productos y servicios"		=>array("Valor"=>rand(0,1000)/100),
			"Satisface las necesidades"					=>array("Valor"=>rand(0,1000)/100),
			"Gestión satisfactoria de reclamaciones"	=>array("Valor"=>rand(0,1000)/100),
			"Buen trato a clientes"						=>array("Valor"=>rand(0,1000)/100));
		$atributos["D2: Innovación"] = array(
			"Lanza productos y servicios innovadores"	=>array("Valor"=>rand(0,1000)/100),
			"Adaptación fácil al cambio"				=>array("Valor"=>rand(0,1000)/100),
			"Empresa innovadora"						=>array("Valor"=>rand(0,1000)/100));
		$atributos["D3: Trabajo"] = array(
			"Preocupación bienestar de los empleados"	=>array("Valor"=>rand(0,1000)/100),
			"Paga a empleados de forma justa"			=>array("Valor"=>rand(0,1000)/100),
			"Buen lugar para trabajar"					=>array("Valor"=>rand(0,1000)/100),
			"Ofrece igualdad de oportunidades"			=>array("Valor"=>rand(0,1000)/100),
			"Tiene buenos empleados"					=>array("Valor"=>rand(0,1000)/100));
		$atributos["D4: Gobierno"] = array(
			"Tiene un comportamiento ético"				=>array("Valor"=>rand(0,1000)/100),
			"Uso responsable de su poder"				=>array("Valor"=>rand(0,1000)/100),
			"Abierta y transparente"					=>array("Valor"=>rand(0,1000)/100));
		$atributos["D5: Ciudadanía"] = array(
			"Protege el medioambiente"					=>array("Valor"=>rand(0,1000)/100),
			"Apoya buenas causas sociales"				=>array("Valor"=>rand(0,1000)/100),
			"Contribuye con la sociedad"				=>array("Valor"=>rand(0,1000)/100));
		$atributos["D6: Liderazgo"] = array(
			"Bien organizada"							=>array("Valor"=>rand(0,1000)/100),
			"Líder fuerte y respetado"					=>array("Valor"=>rand(0,1000)/100),
			"Visión clara de su futuro"					=>array("Valor"=>rand(0,1000)/100));
		$atributos["D7: Finanzas"] = array(
			"Buenos resultados"							=>array("Valor"=>rand(0,1000)/100),
			"Genera beneficios"							=>array("Valor"=>rand(0,1000)/100),
			"Potencial de crecimiento futuro"			=>array("Valor"=>rand(0,1000)/100));

		$vacios = 0;
		$estilo_tabla = "table table-bordered table-striped table-hover table-medium";
		tabla_simple_2($titulo, $categorias, $atributos, $clasificaciones, $vacios, $estilo_tabla, true);	
		
		
		
		//Tabla 2
		$titulo = "Dimensión";
		$estilo_tabla = "table table-bordered table-striped table-hover table-small alignrigth";
		$categorias = array("Valor");
		$atributos = array(
			"D1: Oferta"=>array("Valor"=>rand(0,1000)/100),
			"D2: Innovación"=>array("Valor"=>rand(0,1000)/100),
			"D3: Trabajo"=>array("Valor"=>rand(0,1000)/100),
			"D4: Gobierno"=>array("Valor"=>rand(0,1000)/100),
			"D5: Ciudadanía"=>array("Valor"=>rand(0,1000)/100),
			"D6: Liderazgo"=>array("Valor"=>rand(0,1000)/100),
			"D7: Finanzas"=>array("Valor"=>rand(0,1000)/100));
		tabla_simple($titulo,$categorias,$atributos,$vacios, $estilo_tabla, true);
		$contenedor = "tarta";
		echo "<div id = \"" . $contenedor . "\" style=\"float: right;min-height:500px; min-width: 700px;\">";
		
		grafica_tarta_google($contenedor, "Reptrak Index", "Dimensiones", $atributos);
		echo "</div>";
			echo "</div>
			  </div>
			</div>
		</div> <!-- /container -->";
	
	}
	
	function vista_drivers()
	{
		/* images/reptrack_es_original.jpg */
		global $conexion;
		$single_status_menu["sectorial"] = true;
		$single_status_menu["termino"] = true;
		$single_status_menu["fecha_desde"] = true;
		$single_status_menu["fecha_hasta"] = true;
		$single_status_menu["ecuaciones"] = true;
		
		top_menu_reptrak(true, $single_status_menu, 2,true);
		reptrak_left_menu(2);
		echo "<script src=\"js/flotr2/flotr2.min.js\"></script>";
		
		/* Recogemos los datos de la entrada de la tabla deseada. Los atributos que introduzca el usuario los recogerá automáticamente la función realizar consulta */
		$tabla = "REPTRAK";
		//$row = realizar_consulta($tabla);
		
		echo "<div class=\"right-side span13\">
			  <div class=\"inner-content\">
				<div class=\"row-fluid\">
				  <div class=\"row-fluid\">
					<div class=\"table-extralarge alignrigth\"><h4>Reptrak Pulse</h4></div>
					<div class=\"table-extralarge alignrigth\"><h4>Reptrak Index</h4></div>
				  </div>";
		
		$estilo_tabla = "table table-bordered table-striped table-hover table-extralarge alignrigth";
		
		//Tabla 1
		
		$titulo = "Reptrak Pulse";
		$categorias = array("Valor");	
		$atributos = array();
			
		$atributos["Estima"]["Valor"] = rand(0,1000)/100;
		$atributos["Admiración"]["Valor"] = rand(0,1000)/100;
		$atributos["Confianza"]["Valor"] = rand(0,1000)/100;
		$atributos["Impresión"]["Valor"] = rand(0,1000)/100;

		$vacios = 3;
			
		tabla_simple($titulo, $categorias, $atributos, $vacios, $estilo_tabla, true);
		
		//Tabla 2
		$titulo = "Reptrak Index";
		$atributos = array(
			"D1: Oferta"=>array("Valor"=>rand(0,1000)/100),
			"D2: Innovación"=>array("Valor"=>rand(0,1000)/100),
			"D3: Trabajo"=>array("Valor"=>rand(0,1000)/100),
			"D4: Gobierno"=>array("Valor"=>rand(0,1000)/100),
			"D5: Ciudadanía"=>array("Valor"=>rand(0,1000)/100),
			"D6: Liderazgo"=>array("Valor"=>rand(0,1000)/100),
			"D7: Finanzas"=>array("Valor"=>rand(0,1000)/100));	
		$vacios = 0;
		tabla_simple($titulo, $categorias, $atributos, $vacios, $estilo_tabla, true);
		

		//Gráfica drivers -> pulse (radar)
		$contenedor = "pulse";
		$categorias = array("D1","D2","D3","D4","D5","D6","D7");
		$datos = array();
		
		
		$datos["0"] = array(rand(0,5),rand(0,9),rand(0,5),rand(0,5),rand(0,5),rand(0,5),rand(0,5));
		$datos["1"] = array(rand(0,5),rand(0,5),rand(0,5),rand(0,5),rand(0,5),rand(0,5),rand(0,5));
		$datos["2"] = array(rand(0,5),rand(0,5),rand(0,5),rand(0,5),rand(0,9),rand(0,5),rand(0,5));
		$datos["3"] = array(rand(0,5),rand(0,5),rand(0,5),rand(0,5),rand(0,5),rand(0,5),rand(0,5));

		$nombre_atributo = array(0 => "Estima",1 => "Confianza",2 => "Impresión",3 => "Admiración");
		
		
		$maxYAxis = 10;
		echo "<div id = \"" . $contenedor . "\" style=\"float: left;min-height:500px; min-width: 600px;\">";
		grafica_radar($contenedor, $datos, $categorias, $nombre_atributo, $maxYAxis);
		echo "</div>";
		
		//Gráfica drivers (imagen)
		$contenedor = "drivers";
		$drivers["D1"] = "4";
		$drivers["D2"] = "7";
		$drivers["D3"] = "20";
		$drivers["D4"] = "14";
		$drivers["D5"] = "16";
		$drivers["D6"] = "30";
		$drivers["D7"] = "9";	
		//Posicionamos un div, le metemos una imagen y posicionamos texto en % del div. Así
		//lograremos que el texto se vea donde tiene que verse siempre
		echo "
		<div id = \"" . $contenedor . "\" style=\"
			float: left;
			min-height:500px;
			max-height:800px;
			min-width: 600px;
			max-width: 700px;
	
		\">
			<img src=\"images/reptrak_es_original.jpg\"
				style=\"float: left;
				width: 500px;
				height: 500px;
				position: absolute;
				z-index: 1\">
			<div
				style=\"float: left;
				position: relative;
				z-index: 2\">
					<p style=\"
						position: absolute;
						margin-left:315px;
						margin-top: 130px;
						color:#B32426;
						font-weight:bold;
					\">" . 
						$drivers["D1"] .
					"%</p>
					<p style=\"
						position: absolute;
						margin-left:390px;
						margin-top: 220px;
						color:#B32426;
						font-weight:bold;
					\">" .
						$drivers["D2"] .
					"%</p>
					<p style=\"
						position: absolute;
						margin-left:360px;
						margin-top: 335px;
						color:#B32426;
						font-weight:bold;
					\">" .
						$drivers["D3"] .
					"%</p>
					<p style=\"
						position: absolute;
						margin-left:253px;
						margin-top: 380px;
						color:#B32426;
						font-weight:bold;
					\">" .
						$drivers["D4"] .
					"%</p>
					<p style=\"
						position: absolute;
						margin-left:150px;
						margin-top: 335px;
						color:#B32426;
						font-weight:bold;
					\">" .
						$drivers["D5"] .
					"%</p>
					<p style=\"
						position: absolute;
						margin-left:125px;
						margin-top: 220px;
						color:#B32426;
						font-weight:bold;
					\">" .
						$drivers["D6"] .
					"%</p>
					<p style=\"
						position: absolute;
						margin-left:200px;
						margin-top: 130px;
						color:#B32426;
						font-weight:bold;
					\">" .
						$drivers["D7"] .
					"%</p>
			</div>
		</div>";
		
		
		
			echo "</div>
			  </div>
			</div>
		</div> <!-- /container -->";
	}
	
	//El tema es la clasificación por la que vamos a separar el gráfico. Por ejemplo, horas del día.
	function grafica_tarta_google($contenedor, $titulo, $tema, $datos)
	{
		echo "<script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script>
		<script type=\"text/javascript\">
		  google.load(\"visualization\", \"1\", {packages:[\"corechart\"]});
		  google.setOnLoadCallback(drawChart);
		  function drawChart() {
			var data = google.visualization.arrayToDataTable([
			  ['Task', '" . $tema . "'],";
			  $salida = "";
			  foreach($datos as $clave => $valor)
			  {
			     $salida .= "['" . $clave . "', " . $valor["Valor"] . "],";
			  }
			  substr($salida, 0, -1);
			  echo $salida . "
			]);

			var options = {
			  title: '" . $titulo . "',
			  backgroundColor: '#F5F5F5',
			  is3D: true,
			};

			var chart = new google.visualization.PieChart(document.getElementById('" . $contenedor . "'));
			chart.draw(data, options);
		  }
		</script>";
	}
	
	function grafica_barras_basica_vertical($contenedor, $titulo, $datos,$tamano_barras,$offset)
	{
		
		echo "<script>(function basic_bars(" . $contenedor . ") {

		  var
			container = document.getElementById('" . $contenedor . "');
			";

			foreach($datos as $indice => $valor)
			{
				echo "d" . $indice . " = [],";
			}
			
			echo "point=null;                                   // Data point variable declaration
			";

		for($i=0; $i<count($datos[0]);$i++)
		{
			foreach($datos as $indice => $dato)
			{
				echo "point = [" . $i . " + " . $offset . " * " . $indice . "," . $dato[$i] . "]
				";
				echo "d" . $indice . ".push(point);
				";
			}
		}
		
		echo "

		// Draw the graph
		  Flotr.draw(
			container,[";
			$salida = " ";
			foreach($datos as $indice => $valor)
			{
				$salida .= "d" . $indice . ",";
			}
			echo substr($salida, 0, -1);
			echo "],
			{
			  bars : {
				show : true,
				horizontal : false,
				shadowSize : 0,
				barWidth : " . $tamano_barras . "
			  },
			  mouse : {
				track : true,
				relative : true
			  },
			  yaxis : {
				min : 0,
				autoscaleMargin : 1
			  },
			  title : '" . $titulo . "',
			}
		  );
		})(document.getElementById('editor-render-0'));</script>";
	}
	
	function grafica_lineal_zoom($contenedor, $titulo, $datos, $nombre_funciones)
	{
		echo "<script>(function mouse_zoom(" . $contenedor . ") {

		  var
		  container = document.getElementById('" . $contenedor . "');
		  ";
		foreach($datos as $indice => $valor)
		{
			echo "d" . $indice . " = [],";
		}
		echo "options = null,
			graph = null,";
		for($i=0; $i<count($datos[0]);$i++)
		{
			foreach($datos as $indice => $dato)
			{
				echo "point = [" . $i . ", " . $dato[$i] . "]
				";
				echo "d" . $indice . ".push(point);
				";
			}
		}
		
			  
		echo "options = {
			selection : { mode : 'x', fps : 30 },
			title : '" . $titulo . "'
		  };
			
		  // Draw graph with default options, overwriting with passed options
		  function drawGraph (opts) {

			// Clone the options, so the 'options' variable always keeps intact.
			var o = Flotr._.extend(Flotr._.clone(options), opts || {});

			// Return a new graph.
			return Flotr.draw(
			  container,
			  [";
				$salida = "";
				foreach($datos as $indice => $dato)
				{
					$salida .= "{data: d" . $indice . ", label: '" . $nombre_funciones[$indice] . "'},"; 
				}
				echo substr($salida,0,-1);
				echo "],
			  o
			);
		  }

		  // Actually draw the graph.
		  graph = drawGraph();      
			
		  // Hook into the 'flotr:select' event.
		  Flotr.EventAdapter.observe(container, 'flotr:select', function (area) {

			// Draw graph with new area
			graph = drawGraph({
			  xaxis: {min:area.x1, max:area.x2},
			  yaxis: {min:area.y1, max:area.y2}
			});
		  });
			
		  // When graph is clicked, draw the graph with default area.
		  Flotr.EventAdapter.observe(container, 'flotr:click', function () { drawGraph(); });
		})(document.getElementById(\"editor-render-0\"));</script>";
	}
	
	function grafica_radar($contenedor, $datos, $categorias, $nombre_atributo, $maxYAxis)
	{
		$salida = "<script>
		(function basic_radar(" . $contenedor . ") {

			
			var
			";
			$i = 0;
			foreach($datos as $clave => $dato)
			{
				$salida .= "s" . $i . " = { label: '" . $nombre_atributo[$i] . "', data: [";
				foreach($dato as $clave => $valor)
				{
					$salida .= "[" . $clave . ", " . $valor . "],";
				}
				$salida = substr($salida,0,-1);
				$salida .= "] },
				";
				$i++;
			}
			$salida .= "graph =null, ticks=0, container=document.getElementById('" . $contenedor . "');

			// Radar Labels
			ticks = [";
			$i = 0;
			foreach($categorias as $categoria)
			{
				$salida .= "[" . $i . ", '" . $categoria . "'],";
				$i++;
			}
			$salida = substr($salida,0,-1) . 
			"];
			
			// Draw the graph.
			graph = Flotr.draw(container, [";
			for($i=0;$i<count($datos);$i++)
			{
				$salida .= "s" . $i . ",";
			}
			$salida = substr($salida,0,-1);
			$salida .= "], {
				radar : { show : true}, 
				grid  : { circular : true, minorHorizontalLines : true}, 
				yaxis : { min : 0, max : " . $maxYAxis . ", minorTickFreq : 2}, 
				xaxis : { ticks : ticks}
			});
		})(document.getElementById(\"editor-render-0\"))</script>
		";
		echo $salida;
	}
	

	?>